<template>
  <div class="login">
    <div class="header-warpper" @click="$router.back(-1)">
      <img src="../assets/l_jt.png" alt />
      <span>登录</span>
    </div>
    <div class="logo">
      <img src="../assets/logo.png" alt />
    </div>
    <div class="m-input-box">
      <input
        class="m-input"
        type="text"
        autocomplete="off"
        name="userName"
        placeholder="请输入登录账号"
        maxlength="40"
        v-model="mobile"
      />
    </div>
    <div class="m-input-box">
      <input
        class="m-input"
        ref="pas"
        type="password"
        autocomplete="new-password"
        name="password"
        placeholder="请输入密码"
        maxlength="16"
        v-model="password"
      />
    </div>
    <div @click="chooseImg" class="save-line-box">
      <i class="fl">
        <img :src="simg" alt />
      </i>记住登录状态，一周内免登录
    </div>
    <Verify
      v-if="modalShow"
      @success="login()"
      @error="error()"
      :barSize="{width:'100%',height:'40px'}"
      :showButton="false"
      :type="3"
    ></Verify>
    <div class="other-link">
      <p>
        <router-link to="/forgetcode" class="link">忘记密码</router-link>
      </p>
      <p class="fixed-bottom">
        <span class="f_bold">还没有币币赚账号？</span>
        <router-link to="/register" class="register">立即注册</router-link>
      </p>
    </div>
  </div>
</template>

<script>
import Verify from "vue2-verify";
// import { Session } from 'inspector';

export default {
  name: "login",
  components: {
    Verify
  },
  data() {
    return {
      istrue: true,
      simg: require("../assets/ywxz.png"),
      mobile: "",
      password: "",
      modalShow: true
    };
  },
  created(){

    if(this.getCookie('name')){
      this.mobile=this.getCookie('name');
      this.password=this.getCookie('password');
      this.istrue = !this.istrue;
      this.simg = require("../assets/yxz.png");
      var islogin=this.getCookie('islogin');
      if(islogin){
        this.login();
      }
    }
  },
  methods: {
    rerender: function() {
      this.modalShow = false;
      setTimeout(() => {
        this.modalShow = true;
      }, 10);
    },
    chooseImg() {
      if (this.istrue) {
        this.simg = require("../assets/yxz.png");
      } else {
        this.simg = require("../assets/ywxz.png");
      }
      this.istrue = !this.istrue;
    },
    setCookie(name,value) {
      var Days = 30;
      var exp = new Date();
      exp.setTime(exp.getTime() + 7 * 24 * 60 * 60 * 1000);
      document.cookie =
        name + "=" + escape(value) + ";expires=" + exp.toGMTString();
    },

    getCookie(
      name //拿到cookie
    ) {
      var arr,
        reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
      if ((arr = document.cookie.match(reg))) return unescape(arr[2]);
      else return null;
    },

    login(event) {
      let self = this;
      this.toast1 = this.$createToast({
        txt: "请输入账号",
        type: "txt"
      });
      this.toast2 = this.$createToast({
        txt: "请输入密码",
        type: "txt"
      });
      console.log(this.$refs.pas, this.mobile, this.password);
      if (!this.mobile) {
        this.rerender();
        return this.toast1.show();
      }
      if (!this.password) {
        this.rerender();
        return this.toast2.show();
      }
      this.$axios
        .post("/index/publics/login", {
          mobile: this.mobile,
          password: this.password
        })
        .then(res => {
          if (res.data.code == 0) {
            setTimeout(() => {
              console.log(this.istrue);
              if (!this.istrue) {
                var exp = new Date();
                exp.setTime(exp.getTime() + 7 * 24 * 60 * 60 * 1000);
                // exp.setTime(exp.getTime() + 10*1000);
                document.cookie = "islogin=true;expires=" + exp.toGMTString();
                this.setCookie("name", this.mobile);
                this.setCookie("password", this.password);
              } else {
                sessionStorage.setItem("islogin", true);
                this.setCookie("name", "");
                this.setCookie("password", "");
              }
              this.$router.push("/index");
            }, 1000);
          } else {
            this.rerender();
            alert(res.data.message);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    error() {
      sessionStorage.removeItem("islogin");
      var exp = new Date();
      exp.setTime(exp.getTime() + 1);
      document.cookie = "islogin=false;expires=" + exp.toGMTString();
    }
  },
  mounted: function() {}
};
</script>
<style scoped lang="less">
.f-flex {
  display: flex;
  display: -webkit-flex;
  align-items: center;
}
.login {
  .logo {
    img {
      width: 2.266667rem;
      height: 2.266667rem;
    }
  }
  padding: 0 0.4rem;
  .header-warpper {
    padding: 0;
    .f-flex();
    height: 1.333333rem;
    color: #000;
    img {
      width: 0.213333rem;
      height: 0.373333rem;
    }
    span {
      font-size: 0.48rem;
      padding-left: 0.2rem;
    }
  }
  .save-line-box {
    text-align: left;
    padding: 0.373333rem 0 1.12rem;
    color: #4562cd;
    .icon-check {
      margin-right: 5px;
    }
  }
  .other-link {
    text-align: center;
    font-size: 0.426667rem;
    a {
      color: #4562cd;
    }
    .fixed-bottom {
      padding-top: 1.706667rem;
    }
    .f_bold {
      color: #aab2ca;
      font-weight: bold;
    }
    p {
      padding-top: 0.6rem;
    }
  }
  .save-line-box {
    .f-flex();
    img {
      width: 0.453333rem;
    }
  }
}
</style>
